<template>
  <div class="searchList">
    <div class="wrapper">
      <div class="topArea">
        <span class="iconfont topIcon" @click="handleGoBack">&#xe697;</span>
        <div class="search">
          <span class="iconfont">&#xeace;</span>
          <input
            class="search__title"
            type="text"
            placeholder="请输入商品名称搜索"
            v-model="key"
          />
        </div>
      </div>
      <div class="shopList">
        <template v-for="(item, index) in dataList" :key="index">
          <ShopItem :item="item" :hideBorder="true" />
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter, useRoute } from "vue-router";
import { ref, reactive } from "vue";
import ShopItem from "@/components/ShopItem.vue";
import { get } from "@/API/axios.js";

// 请求数据 '/api/shop/search'
const getShopDataEffect = () => {
  let dataList = ref([]);
  const getData = async (keyword) => {
    const res = await get("/api/shop/search", { keyword });
    console.log(res.data);
    if (res.errno === 0) {
      dataList.value = res.data;
    }
  };
  return { dataList, getData };
};

export default {
  name: "searchList",
  components: { ShopItem },
  props: [],
  setup() {
    const route = useRoute();
    const router = useRouter();

    let key = ref(route.query.keywords);

    //请求数据
    const { dataList, getData } = getShopDataEffect();
    getData();
    console.log(dataList.value, "----datalist");

    //返回前一页
    const handleGoBack = () => {
      router.back();
    };

    return { key, handleGoBack, dataList };
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.wrapper {
  padding-top: 0.16rem;
}

.topArea {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.24rem;
  .topIcon {
    font-size: 0.26rem;
    color: #b6b6b6;
    margin-right: 0.08rem;
  }
}

.search {
  width: 100%;
  height: 0.32rem;
  border-radius: 0.16rem;
  background-color: $searchBgc-color;
  position: relative;
  color: $grey-color;
  .iconfont {
    position: absolute;
    top: 50%;
    left: 0.16rem;
    transform: translate3d(0, -50%, 0);
    font-size: 0.2rem;
  }
  &__title {
    position: absolute;
    top: 50%;
    left: 0.45rem;
    transform: translate3d(0, -50%, 0);
    font-size: 0.14rem;
    outline: none;
    background: none;
    border: none;
  }
}
</style>
